<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>住宿图片调试页面</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
        .success { color: green; }
        .error { color: red; }
        .warning { color: orange; }
        pre { background: #f5f5f5; padding: 10px; overflow-x: auto; }
        button { padding: 10px 20px; margin: 5px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>住宿图片功能调试</h1>
    
    <div class="section">
        <h2>步骤1: 测试后端API</h2>
        <button onclick="testAPI()">测试 get_obj API</button>
        <pre id="apiResult"></pre>
    </div>
    
    <div class="section">
        <h2>步骤2: 检查字段</h2>
        <pre id="fieldCheck"></pre>
    </div>
    
    <div class="section">
        <h2>步骤3: 解析JSON</h2>
        <pre id="parseResult"></pre>
    </div>
    
    <div class="section">
        <h2>步骤4: 测试图片URL</h2>
        <div id="imageTest"></div>
    </div>

    <script>
        const API_BASE = 'http://127.0.0.1:5000/api';
        
        async function testAPI() {
            const resultDiv = document.getElementById('apiResult');
            const fieldDiv = document.getElementById('fieldCheck');
            const parseDiv = document.getElementById('parseResult');
            const imageDiv = document.getElementById('imageTest');
            
            try {
                // 测试API
                resultDiv.textContent = '正在请求...';
                const response = await fetch(`${API_BASE}/meeting_information/get_obj?meeting_information_id=1`);
                const json = await response.json();
                
                // 显示完整响应
                resultDiv.textContent = JSON.stringify(json, null, 2);
                
                // 检查字段
                if (json.result && json.result.obj) {
                    const obj = json.result.obj;
                    let fieldCheckText = '';
                    
                    // 检查关键字段
                    const fields = [
                        'meeting_information_id',
                        'conference_name',
                        'site_equipment',
                        'organizer_host',
                        'accommodation_images'
                    ];
                    
                    fields.forEach(field => {
                        const value = obj[field];
                        const status = value ? '✅' : '❌';
                        const type = typeof value;
                        const preview = value ? (value.length > 50 ? value.substring(0, 50) + '...' : value) : 'undefined';
                        fieldCheckText += `${status} ${field}: (${type}) ${preview}\n`;
                    });
                    
                    fieldDiv.innerHTML = `<span class="${obj.accommodation_images ? 'success' : 'error'}">${fieldCheckText}</span>`;
                    
                    // 解析JSON
                    if (obj.accommodation_images) {
                        try {
                            const images = JSON.parse(obj.accommodation_images);
                            parseDiv.innerHTML = `<span class="success">✅ JSON解析成功！\n找到 ${images.length} 张图片：\n${JSON.stringify(images, null, 2)}</span>`;
                            
                            // 测试图片
                            imageDiv.innerHTML = '<h3>图片测试：</h3>';
                            images.forEach((img, index) => {
                                const fullUrl = img.url.startsWith('/api/') 
                                    ? `${API_BASE}${img.url.substring(4)}` 
                                    : `http://127.0.0.1:5000${img.url}`;
                                
                                imageDiv.innerHTML += `
                                    <div style="margin: 10px 0;">
                                        <p><strong>图片${index + 1}:</strong> ${img.caption}</p>
                                        <p>URL: ${img.url}</p>
                                        <p>完整URL: ${fullUrl}</p>
                                        <img src="${fullUrl}" style="max-width: 200px; border: 1px solid #ccc;" 
                                             onerror="this.parentElement.innerHTML+='<span class=error>❌ 加载失败</span>'"
                                             onload="this.parentElement.innerHTML+='<span class=success>✅ 加载成功</span>'">
                                    </div>
                                `;
                            });
                        } catch (e) {
                            parseDiv.innerHTML = `<span class="error">❌ JSON解析失败：${e.message}</span>`;
                        }
                    } else {
                        parseDiv.innerHTML = '<span class="error">❌ accommodation_images 字段为空或未定义</span>';
                    }
                } else {
                    fieldDiv.innerHTML = '<span class="error">❌ API返回数据格式错误</span>';
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">❌ 请求失败：${error.message}\n\n请确保：\n1. 后端服务正在运行 (http://127.0.0.1:5000)\n2. 已重启后端服务\n3. 数据库有数据</span>`;
            }
        }
        
        // 页面加载时自动测试
        window.addEventListener('load', testAPI);
    </script>
</body>
</html>




